<script setup>
import { computed, reactive, watch } from "vue";
import { Location, Delete, Edit, Star, StarFilled } from "@element-plus/icons-vue"
import mapTool from '@/hook/useBaiduMap'
import ModelViewer from "./comps/ModelViewer.vue"
import ModelVideo from "./comps/ModelVideo.vue"
import ModelFile from "./comps/ModelFile.vue"
import ModelEdit from "./comps/ModelEdit.vue"
import { useNote } from "@/stores/note";

const props = defineProps(["note", "readonly"])
const Note = useNote()

// 只读模式，不显示编辑，用于分享模块
const readonly = computed(() => props.readonly == '')
const isEdit = ref(false)
// 传给子组件，控制编辑模式
const setEdit = v => isEdit.value = v

// 删除方法封装
const deleteNote = () => Note.deleteNote(props.note)

// 收藏方法
const starNote = () => {
  let i = props.note.noteTags.indexOf('收藏')
  if (i < 0) { // 没收藏
    props.note.noteTags.push('收藏')
    Note.updateNote({ noteId: props.note.noteId, noteTags: props.note.noteTags })
  } else {
    props.note.noteTags.splice(i, 1)
    Note.updateNote({ noteId: props.note.noteId, noteTags: props.note.noteTags })
  }
}

// 是否展开
const isOpen = ref(false)

</script>

<template>
  <!-- 主模块模板 -->
  <div class="m-in-model note">
    <span v-if="note.noteInfo.title && !isOpen" class="openBtn" @click="isOpen = true">
      <span style="font-weight: bolder;">{{ note.noteInfo.title }}</span>
      ▼<span v-if="note.noteImgs.length">📸×{{ note.noteImgs.length }}</span><span
        v-if="note.noteVideos.length">&nbsp;🎬×{{ note.noteVideos.length }}</span><span
        v-if="note.noteFiles.length">&nbsp;📁×{{ note.noteFiles.length }}</span>
    </span>
    <!-- <span v-if="note.noteInfo.title && !isOpen" @click="isOpen = true"> 展开 ▼ </span> -->

    <div class="content" v-else>
      <div class="text">
        <pre style="white-space: pre-wrap;display: inline;">{{ note.noteContent }}</pre>
        <span v-if="(note.noteVideos.length || note.noteFiles.length) && !isOpen" class="openBtn" @click="isOpen = true">
          ▼<!--<span v-if="note.noteImgs.length">📸×{{ note.noteImgs.length }}</span>--><span
            v-if="note.noteVideos.length">&nbsp;🎬×{{ note.noteVideos.length }}</span><span
            v-if="note.noteFiles.length">&nbsp;📁×{{ note.noteFiles.length }}</span>
        </span>
      </div>

      <!-- 图片和视频模块 -->
      <ModelViewer v-if="note.noteImgs.length" :noteImgs="note.noteImgs" />
      <template v-if="isOpen">
        <ModelVideo v-if="note.noteVideos.length" :noteVideos="note.noteVideos" />
        <ModelFile v-if="note.noteFiles.length" :noteFiles="note.noteFiles" />
      </template>
      <!-- 视频模块包含在图片模块的NoteViewer中 -->
      <!-- 音频模块 -->
      <!-- <div><el-icon :size="size"><Microphone @click="" /></el-icon></div> -->
      <div class="littleItem">
        <!-- 空开、参与人员模块和标签模块一起 -->
        <el-tag v-if="note.noteType==='public'" type="warning">公开</el-tag>
        <el-tag v-for="tag in note.notePeople" :key="tag" type="success">{{ tag }}</el-tag>
        <el-tag v-for="tag in note.noteTags" :key="tag">{{ tag }}</el-tag>
        <!-- 位置模块 -->
        <span v-if="note.noteLocation.length" style="white-space:nowrap;color:var(--el-color-info);">
          <Location style="height:13px;" /><span style="font-size:10px;"> {{ note.noteLocation[1] }} </span>
        </span>
      </div>

    </div>

    <!-- 编辑组件 -->
    <ModelEdit v-if="isEdit && !readonly" :note="note" :setEdit="setEdit" />

    <!-- 悬浮菜单 -->
    <el-button-group class="menu" v-show="!isEdit && !readonly" size="small">
      <!-- 收藏按钮 -->
      <el-button v-if="note.noteTags.indexOf('收藏') < 0" :icon="Star" @click="starNote" />
      <el-button v-else :icon="StarFilled" @click="starNote" />
      <el-button :icon="Edit" @click="setEdit(true)" />
      <el-button :icon="Delete" @click="deleteNote" />
      <slot></slot>
    </el-button-group>

  </div>
</template>

<style lang="less" scoped>
.m-in-model {
  padding: 5px;
  margin: 0px;
  overflow: visible;

  .content {
    color: var(--font-color);
    width: 100%;

    .text {
      line-height: 20px;
      width: 100%;
      word-wrap: break-word;

      .openBtn {
        color: var(--mini-text-color);
        cursor: pointer;
        white-space: nowrap;
      }
    }
  }

  .littleItem {
    .el-tag {
      margin-top: 3px;
      margin-right: 3px;
    }
  }

  // 悬浮菜单
  .menu {
    z-index: 9;
    display: none;
    position: absolute;
    right: 10px;
    bottom: -25px;
  }

  &:hover .menu {
    display: inline-block;
  }
}
</style>